监听移动端滑动事件

发表于 | |
字数统计: 218

监听用户滑动事件

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
var mybody = document.getElementsByTagName('body')[0];
    var startX, startY, moveEndX, moveEndY, X, Y;
    mybody.addEventListener('touchstart', function (e) {
        // e.preventDefault();
        startX = e.touches[0].pageX;
        startY = e.touches[0].pageY;
    }, false);
    mybody.addEventListener('touchmove', function (e) {
        // e.preventDefault();
        moveEndX = e.changedTouches[0].pageX;
        moveEndY = e.changedTouches[0].pageY;
        X = moveEndX - startX;
        Y = moveEndY - startY;
        if (Math.abs(X) > Math.abs(Y) && X > 0) {// right
            alert('向右');
        }
        else if (Math.abs(X) > Math.abs(Y) && X < 0) {// left
            alert('向左');
        }
        else if (Math.abs(Y) > Math.abs(X) && Y > 0) {// down
            alert('向下');
        }
        else if (Math.abs(Y) > Math.abs(X) && Y < 0) {// up
            alert('向上');
        }
        else {//没有发生滑动
            alert('没有发生滑动');
        }
    });

主要是通过touchstart和touchmove来监听用户滑动，再通过滑动的起始坐标作差的绝对值来判断是向哪个方向滑动。